<template>
  <div class="profile-frame">
    <div class="profile-item">
      <el-card class="box-card">
        <el-form :inline="true" class="from-time">
          <el-form-item label="投标时间筛选:">
            <el-date-picker
              v-model="filterTime.timeS"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            --
            <el-date-picker
              v-model="filterTime.timeE"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="timeFind">查询</el-button>
          </el-form-item>
          <el-form-item class="add-btn">
            <el-button type="primary"
            :disabled="identity!='manager'"
            @click="addProInfo">添加</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="profile-table">
      <el-table
        :data="pageData"
        height="9rem"
        >
        <el-table-column
          label="创建时间"
          align="center"
          width="250"
          >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 8px">{{ scope.row.date}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收支类型"
          align="center"
          width="145">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.type}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收支描述"
          align="center"
          width="170">
          <template slot-scope="scope">
            <span style="margin-left: 10px;">{{ scope.row.describe}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收入"
          align="center"
          width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px;color:#0f0">+{{ scope.row.income}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="支出"
          align="center"
          width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px;color:#f00">-{{ scope.row.expend}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="账户现金"
          align="center"
          width="170">
          <template slot-scope="scope">
            <span style="margin-left: 10px;color:#00f">{{ scope.row.cash}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          width="210">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.remarks}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180">
          <template slot-scope="scope">
            <el-button type="danger"
            :disabled="identity!='manager'"
            @click="handlDel(scope.row._id)">删除</el-button>
             <el-button type="warning" @click="handlEdit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.page_current"
              :page-sizes="pagination.pageSizes"
              :page-size="pagination.pageSize"
              :layout="pagination.page_layout"
              :total="pagination.total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <dialog-frame :formData="formData" :optionDialog="optionDialog"
    @updateData="getProfile"></dialog-frame>
  </div>
</template>

<script>
import DialogFrame from "@/components/dialog.vue";
export default {
  name: 'ProFiles',
  data(){
    return {
      pageData:[],
      profileList:[],
      filterTime:{
        timeS:"",
        timeE:""
      },
      pagination:{
        page_current:1,//当前显示页码
        total:0,//总条数
        pageSizes:[5, 10, 50, 100], //设置每页多少条
        pageSize:5,//每页到多条
        page_layout:"total, sizes, prev, pager, next, jumper"//分页属性值
      },
      formData:{
        type:"",
        describe:"",
        income:"",
        expend:"",
        cash:"",
        remarks:"",
        id:""
       },
       optionDialog:{
            dialogVisible: false,
            title:"",
            submit:""
        }
    }
  },
  components:{
    DialogFrame
  },
  computed:{
    identity(){
      return this.$store.state.user.identity;
    }
  },
  methods:{
    setPaginations(){
      //共有多少条数据
      this.pagination.total=this.profileList.length;
      this.pagination.page_current=1;
      this.pagination.pageSize=5;

      this.pageData=this.profileList.filter((item,index)=>{
        return index < this.pagination.pageSize;
      })
      // this.pageSize=this.pagination.total;
    },
    handleSizeChange(page_size) {
      this.pagination.pageSize=page_size;
      this.pagination.page_current=1;
      this.pageData=this.profileList.filter((item,index)=>{
        return index < page_size;
      })
    },
    handleCurrentChange(current_page) {
      let index=this.pagination.pageSize*(current_page-1);//当前页 显示的所有条数
      let nums=this.pagination.pageSize*current_page;  //跳转后显示的所有条数
      let pageFrameData=[]
      for(let i=index; i<nums;i++){
        if(this.profileList[i]){
          pageFrameData.push(this.profileList[i]);
        }
        this.pageData=pageFrameData;
      }
    },
    getProfile(){
     this.$axios.get("/api/profile/").then(res=>{
       this.profileList=res.data;
       this.setPaginations();
     }).catch(err=>{
       console.log(err)
     })
    },
    handlDel(id){
      this.$axios.delete("/api/profile/delete/"+id).then(res=>{
        this.getProfile()
        this.$message('删除成功！');
      }).catch(err=>{
        this.$message('删除失败！');
       console.log(err)
     })
    },
    handlEdit(row){
      this.optionDialog.dialogVisible= true;
      this.optionDialog.title="修改资金信息";
      this.optionDialog.submit="edit";
      this.formData.type=row.type;
      this.formData.describe=row.describe;
      this.formData.income=row.income;
      this.formData.expend=row.expend;
      this.formData.cash=row.cash;
      this.formData.remarks=row.remarks;
      this.formData.id=row._id;
    },
    timeFind(){
        if(!this.filterTime.timeS || !this.filterTime.timeE){
          this.$message({
            type:"warning",
            message:"请输入筛选事件区间"
          });
        }else{
          let timeS=this.filterTime.timeS.getTime();
          let timeE=this.filterTime.timeE.getTime();
          this.pageData=this.profileList.filter((item,index)=>{
            let date =new Date(item.date);
            let time=date.getTime();
            return time >  timeS && time<timeE;       
          });
          this.setPaginations();
        }
        
    },
    addProInfo(){
      this.optionDialog.dialogVisible= true;
      this.optionDialog.title="添加资金信息";
      this.optionDialog.submit="add";
      this.formData.type="";
      this.formData.describe="";
      this.formData.income="";
      this.formData.expend="";
      this.formData.cash="";
      this.formData.remarks="";
    }
  },
  mounted(){
    this.getProfile()
  }
}
</script>

<style scoped>
.pagination{
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  box-sizing: border-box;
  padding-right: 0.3rem;
  text-align: right;
}
.add-btn{
  float: right;
}
.el-form-item{
  margin-bottom: 0rem;
}
.profile-item{
  margin-bottom: 0.4rem;
}
.profile-table{
  border: 1px solid #ccc;
  max-height: 10.5rem;
  border-radius: 0.1rem;
}
.el-table th.gutter{
  display: table-cell!important;
}
 
.el-table colgroup.gutter{
  display: table-cell!important;
}
.profile-frame{
  height: 100%;
  width: 100%;
  background: #fff;
  padding: 0.3rem;
  box-sizing: border-box;
}
</style>
